<!--
- 给Input预留插槽 - slot
- 能够展示label和校验信息
- 能够进行校验
-->
<template>
  <div>
    <label v-if="label">{{ label }}</label>
    <slot></slot>
    <!-- 校验信息 -->
    <p v-if="errorMessage">{{ errorMessage }}</p>
  </div>
</template>
<script>
import Schema from "async-validator";
export default {
  data() {
    return {
      errorMessage: "",
    };
  },
  inject: ["form"],
  props: {
    label: {
      type: String,
      default: "",
    },
    prop: String, // 作用：识别表单类型+获取表单数据
  },
  mounted() {
    // 监听子组件的validateInput()的校验事件、并执行监听
    this.$on("validateInput", () => {
      this.validateFormItem();
    });
  },
  methods: {
    validateFormItem() {
      // 执行组件校验
      // 1.获取校验规则
      const rules = this.form.rules[this.prop];
      // 2.获取数据
      const value = this.form.model[this.prop];
      // 3.执行校验(外部插件async-validator)
      const desc = {
        [this.prop]: rules,
      };
      const schema = new Schema(desc);
      // 参数1是值,参数2是校验错误对象数组
      // 返回的Promise<boolean>
      return schema.validate({ [this.prop]: value }, (errors) => {
        if (errors) {
          // 有错
          this.errorMessage = errors[0].message;
        } else {
          // 没错，清除错误信息
          this.errorMessage = "";
        }
      });
    },
  },
};
</script>